<template>
	<basic-container>
		<el-form label-width="60px" :model="ruleForm" ref="ruleForm" size="mini">
			<el-form-item label="订单:">
				<avue-crud size="mini" :option="option" :data="data" :page="page" @search-change="searchChange" @search-reset="searchReset"
				 @current-change="currentChange" @size-change="sizeChange" @selection-change="selectionChange" @on-load="onLoad">
					<template slot="menuLeft">
						（不选择全部生成）
					</template>
				</avue-crud>
			</el-form-item>
			<el-row>
				<el-col span="12">
					<el-form-item label="仓库:" prop="store" :rules="[{
						required: true,
						message: '请选择仓库！',
						trigger: 'change'
					}]">
						<el-select v-model="ruleForm.store" style="width:100%">
							<el-option-group v-for="group in groups" :key="group.label" :label="group.label">
								<el-option v-for="item in group.groups" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-option-group>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col span="12">
					<el-form-item label="纸箱:">
						<el-select v-model="ruleForm.boxs" style="width:100%" multiple placeholder="不选择全部可用">
							<el-option v-for="item in options" :key="item.code" :label="item.name" :value="item.code">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-form-item>
				<el-button type="primary" :loading="loading" @click="packing('ruleForm')">立即生成</el-button>
				<el-button @click="handleClose">取消</el-button>
			</el-form-item>
		</el-form>
	</basic-container>
</template>

<script>
	import request from '@/router/axios';

	export default {
		data() {
			return {
				loading: false,
				query: {},
				page: {
					pageSize: 10,
					currentPage: 1,
					total: 0
				},
				options: [],
				groups: [],
				ruleForm: {
					orders: '',
					boxs: '',
					store: ''
				},
				rules: {
					store: [{
						required: true,
						message: '请选择仓库！',
						trigger: 'change'
					}]
				},
				option: {
					selection: true,
					searchMenuSpan: 12,
					border: true,
					index: false,
					addBtn: false,
					columnBtn: false,
					searchShow: false,
					refreshBtn: false,
					menu: false,
					column: [{
							label: '订单号',
							prop: 'code',
							width: 120,
							search: true
						},
						{
							label: '客户',
							prop: 'customer',
							searchSpan: 6,
							search: true
						},
						{
							label: '数量',
							prop: 'quantity',
							width: 60
						},
						{
							label: '备注',
							prop: 'remark'
						},
						{
							label: '创建时间',
							prop: 'createdOn',
							width: '160px',
							display: false
						}
					]
				},
				data: []
			};
		},
		created() {
			this.request({
				url: '2/api/BaseBox/pages',
				params: {
					limit: 0
				}
			}).then(res => {
				this.options = res.data.data;
			});
			request({
				url: '2/api/WmsStorage/groups',
			}).then(res => {
				this.groups = res.data.data;
			});
		},
		methods: {
			handleClose(e) {
				this.$emit('closeDialog', e)
			},
			packing(formName) {
				this.$refs[formName].validate((valid) => {
					console.log(valid)
					if (valid) {
						this.loading = true;
						this.ruleForm.boxs = this.ruleForm.boxs == '' ? '' : this.ruleForm.boxs.join(",")
						request({
							url: '2/api/OrderPkg/packing',
							method: 'post',
							data: this.ruleForm
						}).then(res => {
							if (res.data.code == 200) {
								this.handleClose(true);
							} else {
								this.loading = false;
							}
						});
					}
				});
			},
			selectionChange(list) {
				this.ruleForm.orders = ''
				list.forEach(m => {
					this.ruleForm.orders += m.code + ','
				})
			},
			beforeOpen(done, type) {
				done();
			},
			searchReset() {
				this.query = {};
				this.page.currentPage = 1;
				this.onLoad(this.page);
			},
			searchChange(params, done) {
				this.page.currentPage = 1;
				this.query = params;
				this.onLoad(this.page);
				done();
			},
			currentChange(currentPage) {
				this.page.currentPage = currentPage;
			},
			sizeChange(pageSize) {
				this.page.pageSize = pageSize;
			},
			onLoad(page) {
				request({
					url: '2/api/OrderOut/pages',
					params: {
						key: this.query.storeName == undefined ? '' : this.query.storeName,
						type: this.query.storageType == undefined ? '' : this.query.storageType,
						status: 1,
						page: page.currentPage,
						limit: page.pageSize
					}
				}).then(res => {
					const data = res.data
					this.data = data.data;
					this.page.total = data.remark;
				});
			}
		}
	};
</script>


<style>
</style>
